<template>
    <div style="height: 90%">
        <el-row style="height: 50%;">
            <el-row>
                <el-col :offset="2">
                    <span class="class-title">所在班级</span>
                </el-col>
            </el-row>
            <div class="class-list">
                <el-scrollbar :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" noresize="false"
                              tag="section">
                    <ul>
                        <li v-for="(item, index) in classlist" :key="index">
                            <el-row type="flex" justify="center">
                                <el-col span="4">
                                    <el-tag :type="index%2==0? 'primary':'danger'" class="cls-tag">{{item.status}}</el-tag>
                                </el-col>
                                <el-col :span="10">
                                    <div class="class-item-title">{{item.name}}</div>
                                    <div class="class-item-subject">{{item.subject}}</div>
                                </el-col>
                            </el-row>
                        </li>
                    </ul>
                </el-scrollbar>
            </div>
        </el-row>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../../components/headTop'
    import {userList} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        name: 'userDetailCls',
        props: {},
        data() {
            return {
                sid:null,
                classlist:[{status:"在读",name:"三年级一班",subject:"英语"}],
                childForm: {}
            }
        },

        components: {
            ElOption,
            ElInput,
            headTop,

        },
        computed: {},
        created() {
        },
        mounted() {
           // this.initClassList();

        },
        methods: {
            async initClassList(){
                const res=   await classList({data:{id:sid}});
                if(res.success==true){
                    this.classlist=res.data;
                }else {

                }
            },

        },
    }
</script>
<style lang="less" scoped>
    @import '../../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }

    .class-item-title {
        font-size: 12px;
    }
    .class-item-subject {
        font-size:12px;
    }
    .cls-tag {
        height:25px;
        width:40px;
        font-size:6px;
        border-radius: 0px;
        padding: 0px 8px;
    }
    .class-title {
        font-size: 13px;
        color: #bbbbbb;
    }




</style>
